<template>
    <div>
        <van-tabbar route active-color="#ee0a24" inactive-color="#647DB5">
            <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item replace to="/login" icon="desktop-o">在学</van-tabbar-item>
            <van-tabbar-item replace to="/user" icon="contact">我的</van-tabbar-item>
        </van-tabbar>
        <!-- <div class="footer">
            <div v-for="(item, index) in arr" :key="item.id">
                <span @click="gotofoot(item, index)" :class="[item.icon, { active: dot == index }]" class="iconfont"></span>
                <p>{{ item.p }}</p>
            </div>
        </div> -->
    </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar).use(TabbarItem);
export default {
    data() {
        return {
            // dot: 0,
            // arr: [
            //     { id: 1, icon: "icon-quku", p: "首页", router: "/" },
            //     { id: 2, icon: "icon-shipin", p: "在学", router: "/login" },
            //     { id: 3, icon: "icon-laoshi", p: "我的", router: "/user" },
            // ],
        };
    },
    created() {},
    methods: {
        //跳转路由
        // gotofoot(item, index) {
        //     this.dot = index;
        //     this.$router.push({
        //         path: item.router,
        //         query: {},
        //     });
        // },
    },
};
</script>

<style lang="less" scoped>
/deep/ .van-hairline--top-bottom {
    z-index: 0;
}

// .footer {
//     position: fixed;
//     bottom: 0;
//     width: 100%;
//     height: 53px;
//     background: #fff;
//     padding: 5px 50px;
//     display: flex;
//     justify-content: space-between;
//     div {
//         text-align: center;
//         span {
//             font-size: 20px;
//             &.active {
//                 color: red;
//             }
//         }
//         p {
//             font-size: 10px;
//         }
//     }
// }
</style>
